<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>
<body>
    <!-- <div class="box" onclick="alert(11111)"></div>
    <a href="javascript:alert(22222);">点击</a> -->

    <div class="box"></div>
</body>
<script>
    // 给一个元素绑定事件的方法
    // 1.  内联JS绑定事件  => 不常用(代码写在标签内 可读性差 后期维护成本高)
    // 绑定:
    // <div class="box" onclick="alert(11111)"></div>
    // 清除: 
    // box.removeAttribute("onclick")

    // 2.  DOM一级事件 (赋值式)  => 一个元素只能绑定一个相同类型的事件(重复绑定 后面会覆盖前面的)
    
    // DOM一级事件 (赋值式) 
    // var box = document.getElementsByClassName("box")[0];

    // 绑定
    // box.onclick = function(){
    //     alert(11111);
    // }

    // box.onclick = null;

    // 3.  DOM二级事件(事件监听绑定事件)  =>  可以给一个元素绑定多个相同类型的事件
    // ele.addEventListener(eventType,callback)  添加事件监听
    // eventType  => 绑定事件的类型 (click dblclick keydown load)
    // callback   => 事件触发时执行的函数

    // ele.removeEventListener(eventType,callback)  删除事件监听
    // eventType  => 绑定事件的类型 (click dblclick keydown load)
    // callback   => 事件触发时执行的函数

    // 注意: 需要对应函数的引用清除  (函数也是一个特殊的对象)


    
    // 回调函数:把函数(匿名函数,命名函数)作为一个参数传到另一个函数中, 让它在另一个函数内执行 (传入的函数具体什么时候执行 看内部代码执行流程)
    // setInterval(function(){},2000)
    
    var box = document.getElementsByClassName("box")[0];

    function clickHandler_1(e){
        console.log("e",e);
        console.log("this",this); // 指向绑定事件的元素 (this 内部做了处理,改变了原本的this指向 => 将this指向绑定事件的元素)
    }

    var clickHandler_2 =  function(e){
        console.log("随机颜色");
        this.style.backgroundColor = randColor();
    }


    box.addEventListener("click",clickHandler_1);
    box.addEventListener("click",clickHandler_2);
    
    box.removeEventListener("click",clickHandler_1);
    box.removeEventListener("click",clickHandler_2);

    function randColor() {
        var str = "0123456789abcdef";

        var colorStr = "#";
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * 16); // 0-15的随机数 (下标)
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }
</script>
</html>